<template>
  <div class="order">
    <header>
      <van-nav-bar title="确认订单">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
      </van-nav-bar>
    </header>
    <main>
      <div class="addressList">
        <van-swipe-cell v-for="(item, index) in deAddress" :key="index">
          <van-card>
            <template #title>
              <h4>
                {{ item.name }}<span>{{ item.tel }}</span>
              </h4>
              <p>
                {{ item.province }} {{ item.city }} {{ item.county }}
                {{ item.addressDetail }}
              </p>
            </template>
            <template #tags>
              <van-tag plain type="danger">默认</van-tag>
            </template>
            <template #num>
              <van-icon
                name="arrow"
                size="24"
                @click="$router.push('/my_address')"
              />
            </template>
          </van-card>
        </van-swipe-cell>
      </div>
      <div>
        <van-card
          v-for="(item, index) in orderList"
          :key="index"
          :num="item.num"
          :price="item.originprice"
          :title="item.proname"
          :thumb="item.img1"
        >
          <template #tags>
            <van-tag plain type="danger"
              >支持七天无理由退货 ( 拆封后不支持 )</van-tag
            >
          </template>
        </van-card>
        <van-cell title="配送" value="顺丰快递" :border="false" is-link />
        <van-cell title="退换无忧" value="商家赠送" :border="false" />
        <van-cell title="留言" value="建议留言前先与商家沟通确认" />
        <van-cell
          class="top10"
          title="商品金额"
          value="￥17499.00"
          :border="false"
        />
        <van-cell title="退换无忧" value="￥0.00" :border="false" />
        <van-cell title="运费" value="￥0.00" :border="false" />
        <van-cell title="立减" value="-￥111.00" :border="false" />
        <van-cell title="优惠券" value="无可用" :border="false" is-link />
        <van-cell title="嗨豆" value="共70，满500可用" :border="false" />
        <van-cell
          title="礼品卡(嗨购卡/E卡)"
          value="无可用"
          :border="false"
          is-link
        />
        <p class="price">
          合计：<span>￥{{ price }}</span>
        </p>
        <van-cell
          class="top10"
          title="发票"
          value="电子（商品明细-个人）"
          is-link
        />
      </div>
    </main>

    <van-submit-bar
      :price="price * 100"
      label=" "
      text-align="left"
      button-text="在线支付"
      @submit="onSubmit"
    />

    <div class="password" v-if="flag">
      <!-- 密码输入框 -->
      <van-password-input :value="value" :focused="flag" />

      <!-- 数字键盘 -->
      <van-number-keyboard v-model="value" :show="flag" @blur="flag = false" />
    </div>
    <div class="loading"><van-loading v-if="isloading" color="red" /></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Card, PasswordInput, NumberKeyboard, Toast, Loading ,Tag } from "vant";

Vue.use(Card);
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
Vue.use(Tag);
Vue.use(Toast);
Vue.use(Loading);
import { confirmOrder, doDeleteCartItem } from "../api/order";
export default {
  data() {
    return {
      deAddress: [],
      orderList: [],
      price: "",
      value: "",
      showKeyboard: false,
      flag: false,
      isloading: false,
    };
  },
  methods: {
    onSubmit() {
      this.flag = true;
      this.showKeyboard = true;
    },
  },
  created() {
    confirmOrder({
      userid: localStorage.getItem("userid"),
      time: this.$route.params.time,
    }).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.deAddress = [res.data.address];
        this.orderList = res.data.data;
        console.log(this.orderList);
        this.price = this.orderList.reduce((sum,item)=>{
          return sum+=item.originprice*item.num
        },0)
      }
    });
  },
  watch: {
    value() {
      if (this.value.length === 6 && this.value !== "123456") {
        Toast("密码错误");
      } else if (this.value.length === 6 && this.value === "123456") {
        this.isloading=true
        setTimeout(() => {
          doDeleteCartItem({ userid: localStorage.getItem("userid") }).then(
            (res) => {
              console.log(res);
              if (res.data.code == 200) {
                Toast("支付成功");
                this.flag = false;
                this.isloading=false
                this.$router.push("/payend")
              }
            }
          );
        }, 1000);
      }
    },
  },
};
</script>

<style scoped>
.order {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  height: 7%;
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  justify-content: space-between;
  background: rgb(234, 234, 234);
}
main .addressList {
  border-bottom: 0.02rem dashed red;
}
.van-card h4 {
  font-size: 0.14rem;
  color: #888;
}
.van-card p {
  font-size: 0.16rem;
  margin: 0.1rem 0;
  font-weight: 900;
  font-family: "黑体";
}
.addressList ::v-deep .van-icon-arrow {
  position: absolute;
  right: 0;
  bottom: 0.36rem;
}
::v-deep .van-button {
  display: fixed;
  margin: 0.1rem 0;
}
.top10 {
  margin-top: 0.1rem;
}
.price {
  text-align: right;
  padding: 0.06rem 0.1rem;
  font-size: 0.18rem;
  background: #fff;
}
.price span {
  color: red;
  font-weight: 600;
}
footer {
  height: 7%;
}
.van-password-input {
  position: fixed;
  bottom: 2.44rem;
  left: 0;
  right: 0;
  background: #fff;
}
.van-tag--danger {
  margin: 0.1rem 0;
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50% -50%);
}
</style>